/*
 * 标签添加
 * @Author: ljb
 * @Date: 2018-03-27 17:53:51
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-08-14 18:05:08
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
    .v-admin-product-tag-create {
		min-height: 600px;
		.product-tag-from {
			width: 350px;
		}
    }
</style>
<template>
	<div class="v-admin-product-tag-create">
		<Row
			type="flex"
			justify="start">
			<i-col push="1">
				<Form
					ref="formValidate"
					:model="formValidate"
					:rules="ruleValidate"
					:label-width="120"
					name="create-form"
					class="product-tag-from">

					<Form-item
						:label="$t('tag.name')"
						prop="name">
						<i-input
							v-model="formValidate.name"
							:placeholder="$t('tag.please_enter_name')"
							name="create-name"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('tag.english_name')"
						prop="const">
						<i-input
							v-model="formValidate.const"
							:placeholder="$t('tag.please_enter_name')"
							name="create-name"
							type="text"/>
					</Form-item>

					<Form-item>
						<Button
							type="primary"
							@click="handleSubmit('formValidate')">
							{{ $t('common.submit') }}
						</Button>
						<Button
							type="ghost"
							style="margin-left: 8px"
							@click="handleReset('formValidate')">
							{{ $t('common.reset') }}
						</Button>
					</Form-item>

				</Form>
			</i-col>
		</Row>
	</div>
</template>

<script>

export default {
	name: 'TagCreate',

	data() {
		return {
			formValidate: {
				name: null,
				const: null,
			}, // 新建标签时的表单

			ruleValidate: { // 表单验证规则
				name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('tag.name') }),
						trigger: 'blur,change',
					},
				],
				const: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('tag.english_name') }),
						trigger: 'blur,change',
					},
				],
			},

		};
	},
	methods: {
		/**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.$emit('post', this.formValidate);
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs[name].resetFields();
		},

	},
};
</script>
